Form and Input Tags

  • 1. Form Elements

    The following list shows some of the form elements that we can use while creating a form.

    #1) Label

    Description: A label represents the caption for the form element.

    Example: Generating a label for the first name.

    
                    <label >First Name</label>
    #2) Text Input

    Description: A text input field is a single line input field that allows the user to enter text.

    Example: Generating a text input field for the first name.

    
                    <input type="text" name="fname" >
    Show #4) Number Input

    Description: The number of input field allows the user to enter a numeric value.

    Example: Generating a number input field for age.

    
                     <input type="number" name="age" >
    #5) Date Input

    Description: A date input field allows the user to select a date.

    Example: Generating a date input field for the birth date.

    
<input type="date" name="bday">
    #6) File Input

    Description: A file input field allows the user to upload a file.

    Example: Generating a file select field for certificate copy upload.

    
<input type="file" name="certcopy" >
    #7) Hidden Input

    Description: A hidden input field allows the developer to add data when the user submits the form, and the user cannot see or modify these data.

    Example: Generating a hidden input field for student id that has the value 220.

    
<input type="hidden" name="stu_id" value="220">
    #8) Textarea

    Description: A textarea allows the user to enter a long text. It may contain multiple lines of text.

    Example: Generating a textarea for address.

    
<textarea name="address"></textarea>
    #9) Email Input

    Description: An email input field allows the user to enter an email address. It automatically validates the email format.

    Example: Generating an email input field.

    
<input type="email" name="email">
    #10) Password Input

    Description: A password input field allows the user to enter a password. The entering characters are masked.

    Example: Generating a password input field.

    
<input type="password" name="password">
    #11) Drop-down List or Select Box

    Description: A drop-down list or select box allows the user to select an option from a list of options.

    Example: Generating a drop-down list for the title.

    

<select name="title" >
      <option value="" >--</option>
      <option value="mr.">Mr.</option>
      <option value="ms.">Ms.</option>
      <option value="dr.">Dr.</option>
</select>
    #12) Radio Button Input

    Description: A radio button allows the user to select a single option from a list of two or more mutually exclusive options.

    Example: Generating a radio button input field for gender.

    
<input type="radio" value="Male" name="gender"> <label for="male">Male</label>

<input type="radio" value="Female"  name="gender"> <label for="female">Female</label>
    #13) Checkbox Input

    Description: A checkbox allows the user to select one or more options from a given set of options.

    Example: Generating a checkbox input field for colours.

    

        <input type="checkbox" value="Red"  name="colour1">      <label for="red">Red</label>
        <input type="checkbox" value="Yellow"  name="colour2">    <label for="yellow">Yellow</label>
        <input type="checkbox" value="Green"  name="colour3">      <label for="green">Green</label>
    #14) Buttons

    a) Normal Button

    Description: A normal button is a clickable button.

    Example: Generating a normal button.

    
<input type="button" value="Click!" onclick="msg()">

    b) Submit Button

    Description: A submit button allows the user to submit form data to the server-side of the application.

    Example: Generating a submit button.

    
<input type="submit" name="submit" value="Submit">

    c) Reset Button

    Description: A reset button allows the user to set form fields to its original values.

    Example: Generating a reset button.

    
<input type="reset" name="reset" value="Reset">
  • 2. Form Tag

    1. form tag is used to create a form 

    
                            <form>

                            </form>

    2. All form inputs must be written inside the form tag

    3. A form must have 'action' attribute for sending the user entered data to a server 

    
                            <form action="">

                            </form>
  • 3. Form Example 

    

                  <!DOCTYPE html>
<html>
<head>
    <title>Laravel  Forms Tutorial</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 </head>
<body>
<div class="container mt-3 mb-3">
 

 
    <h3>Student Registration Form</h3>
    <form action="{ route('student.store') }}"  enctype="multipart/form-data">
 
 
        <div class="form-group">
            <label>Title</label>
            <select class="form-control" name="title" id="title">
                <option value="">--</option>
                <option value="mr">Mr.</option>
                <option value="ms.">Ms.</option>
            </select>
        </div>
 
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" name="name" id="name">
        </div>
 
        <div class="form-group">
            <label>Birth Date</label>
            <input type="date" class="form-control" name="bday" id="bday">
        </div>
 
        <div class="form-group">
            <label>Age</label>
            <input type="number" class="form-control" name="age" id="age">
        </div>
 
        <div class="form-group">
            <label>Gender</label>
                <div class="custom-control custom-radio custom-control-inline">
                    <input class="custom-control-input" type="radio" value="Male" id="male" name="gender">
                    <label class="custom-control-label" for="male">Male</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input class="custom-control-input" type="radio" value="Female" id="female" name="gender">
                    <label class="custom-control-label" for="female">Female</label>
                </div>
        </div>
 
        <div class="form-group">
            <label>Phone</label>
            <input type="text" class="form-control" name="phone" id="phone">
        </div>
 
        <div class="form-group">
            <label>Address</label>
            <textarea class="form-control" name="address" id="address" rows="4"></textarea>
        </div>
 
        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" name="email" id="email">
        </div>
 
        <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" name="password" id="password">
        </div>
 
        <div class="form-group">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="1" id="t&c" name="t&c">
                <label class="form-check-label">
                    I agree to the terms and conditions.
                </label>
            </div>
            </div>
 
        <input type="reset" name="reset" value="Reset" class="btn btn-dark">
        <input type="submit" name="submit" value="Submit" class="btn btn-dark">
 
    </form>
</div>
</body>
 
</html>